<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>通用增删改查</title>

    <link href="/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css"
          rel="stylesheet"/>
    <link href="/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>

    <link href="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>

    <!--ztree-->
    <link href="/plugins/zTree/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />

    <!--select2-->
    <link href="https://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
    <!-- daterangepicker -->
    <link href="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet">

    <link href="/app/css/common.css" rel="stylesheet"/>
    <style>
        #table tr .pay-detail {
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <div>
                            <div class="col-lg-2">
                                <div class="input-group">
                                    <button type="button" class="btn btn-default pull-right" id="daterange-btn">
                                        <i class="fa fa-calendar"></i>
                                        <span class="query-time">时间</span>
                                        <i class="fa fa-caret-down"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <label>支付单号</label>
                                <input type="text" class="form-control payNum" placeholder="">
                            </div>
                            <div class="col-lg-2">
                                <label>订单编号</label>
                                <input type="text" class="form-control orderNum" placeholder="">
                            </div>
                            <div class="col-lg-2">
                                <select id="sel_dealType" class="js-data-example-ajax form-control">
                                    <option value="" selected="selected">交易类型</option>
                                </select>
                            </div>
                            <div class="col-lg-2">
                                <select id="sel_payStatus" name="payStatus" class="form-control select2">
                                    <option value="" selected="selected">交易状态</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2" style="text-align:left;">
                            <button type="button" id="btn_query" class="btn btn-success">查询</button>
                            <button type="button" id="btn_export" class="btn btn-success">导出</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <table id="table"></table>
    </div>

<script src="/plugins/jquery.1.12.4.min.js"></script>
<script src="/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/waves-0.7.5/waves.min.js"></script>
<script src="/plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>

<!--tree-->
<script src="/plugins/zTree/js/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="/plugins/zTree/js/jquery.ztree.excheck.min.js" type="text/javascript"></script>

<script src="/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

<!-- select2 -->
<script src="https://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>
<!-- daterangepicker双日历选择框 -->
<script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>

<script src="/app/js/common.js"></script>
<script src="/app/js/i-ajax.js"></script>
<script>
    function init() {
        //定义locale汉化插件
        var locale = {
            "format": 'YYYY-MM-DD',
            "separator": " -222 ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "起始时间",
            "toLabel": "结束时间'",
            "customRangeLabel": "自定义",
            "weekLabel": "W",
            "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
            "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            "firstDay": 1
        };
        //初始化显示当前时间
        $('#daterange-btn span').html(moment().subtract('hours', 1).format('YYYY-MM-DD') + ' 至 ' + moment().format('YYYY-MM-DD'));
        //日期控件初始化
        $('#daterange-btn').daterangepicker(
            {
                'locale': locale,
                startDate: moment().subtract(29, 'days'),
                endDate: moment()
            },
            function (start, end) {
                $('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
            }
        );
    };
    var $table = $('#table');
    $(function () {
        //加载时间选择插件
        init();
        jconfirm.defaults = {
            theme: 'material',
        };
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        tableInit();

        $("#btn_query").click(function () {
            $table.bootstrapTable('refresh');
        })
        var cusId = parent.data.user.name;
        $("#btn_export").click(function () {
            var dates = $(".query-time").text().split(" 至 ");
            var startTime = dates[0];
            var endTime = dates[1];
            var payNum = $(".payNum").val();
            var orderNum = $(".orderNum").val();
            var dealType = $("#sel_dealType").val();
            var status = $("#sel_payStatus").val();
            location.href="/sys/payOrder/export/"+cusId+"?startTime="+startTime+"&endTime="+endTime+"&payNum="+payNum+"&orderNum="
                          +orderNum+"&dealType="+dealType+"&status="+status;
        })

        //加载交易状态下拉数据
        var control = $("#sel_payStatus");
        getStatus(function(data){
            data.content.forEach(function(status){
                control.append("<option value='" + status.id + "'>&nbsp;" + status.text + "</option>")
            })
        })
        function getStatus(fc){
            iGet("/sys/payOrder/status",fc);
        }

        var dealType = $("#sel_dealType");
        getDealType(function(data){
            data.content.forEach(function(status){
                dealType.append("<option value='" + status.payType + "'>&nbsp;" + status.payTypeName + "</option>")
            })
        })
        function getDealType(fc){
            iGet("/sys/payOrder/"+cusId+"/dealType",fc);
        }

    });

    function tableInit(){
        var cusId = parent.data.user.name;
        $table.bootstrapTable({
            url: '/sys/payOrder/' + cusId,
            detailView: true,
            height: getHeight(),
            striped: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            minimumCountColumns: 2,
//            showPaginationSwitch: true,
            clickToSelect: true,
            pageSize: 10,
            pageList: [10, 20, 25, 50, 100],
//            detailView: true,
//            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            classes: 'table table-hover table-no-bordered',
            sidePagination: "server",
            silentSort: false,
            smartDisplay: false,
            idField: 'id',
            sortName: 'id',
            sortOrder: 'asc',
            escape: true,
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'payNum', title: '交易单号', sortable: true, align: 'center'},
                {field: 'orderNum', title: '订单编号', sortable: true, align: 'center'},
                {field: 'payment', title: '支付方式', formatter: 'paymentFormatter', sortable: true, align: 'center'},
                {field: 'dealType', title: '交易类型', formatter: 'dealTypeFormatter', sortable: true, align: 'center'},
                {field: 'amount', title: '交易金额', formatter: 'amountFormatter', sortable: true, align: 'center'},
                {field: 'status', title: '交易状态', formatter: 'payStatusFormatter', sortable: true, align: 'center'},
                {field: 'createTime', title: '交易时间',formatter: 'timeFormat', sortable: true, align: 'center'},
            ],
            queryParams: queryParams,
            responseHandler: responseHandler,
            onExpandRow: function (index,row,$detail) {
                initSubTable(index,row,$detail);
            }
        });
    }
    //加载详情菜单
    function initSubTable(index, row, $detail) {
        var payNum = row.payNum;
        var dealType = row.dealType
        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstrapTable({
            url: '/sys/payOrder',
            sidePagination: "server",
            striped: true,
            classes: 'table table-hover table-no-bordered',
            queryParams: {
                payNum: payNum,
                dealType: dealType,
            },
            columns: [{
                field: 'payTime',
                title: '支付时间',
                align: 'center',
                formatter: 'timeFormat',
            },{
                field: 'trxId',
                title: '平台交易流水号',
                align: 'center',
            }],
            responseHandler: responseHandler,
        })
    }

    //返回数据
    function responseHandler(data){
        if (data.status == "SUCCESS") {
            data = data.content;
            if(data.totalElements == null){
                return {rows: data};
            }else{
                return {total: data.totalElements, rows: data.content};
            }
        } else {
            $.confirm({
                type: 'red',
                title: false,
                content: '请求数据失败',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    confirm: {
                        text: '确定',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
            return {total: 0, rows: []};
        }
    }

    //查询条件
    function queryParams(params) {
        console.log($(".query-time").text());
        var dates = $(".query-time").text().split(" 至 ");
        var startTime = dates[0];
        var endTime = dates[1];
        var payNum = $(".payNum").val();
        var orderNum = $(".orderNum").val();
        var dealType = $("#sel_dealType").val();
        var status = $("#sel_payStatus").val();
        console.log(params)
        return {
            size: params.limit,
            page: params.offset / params.limit,
            sort: params.sort + ',' + params.order,
            startTime: startTime,
            endTime: endTime,
            payNum: payNum,
            orderNum: orderNum,
            dealType: dealType,
            status: status,
        };
    }

    //支付方式转换
    function paymentFormatter(data) {
        if(data === 0){
            return "网上支付"
        }else if(data === 1){
            return "货到付款"
        }else if(data === 2){
            return "POS"
        }else{
            return "-"
        }
    }
    //交易方式转换
    function dealTypeFormatter(data) {
        if(data === "allinPay"){
            return "通联支付"
        }else if(data === "yeePay"){
            return "易宝支付"
        }else{
            return "-"
        }
    }
    //金额转换
    function amountFormatter(data) {
        return formatter(data / 100.00,2);
    }
    //支付状态转换
    function payStatusFormatter(data) {
        if(data === "UNPAY"){
            return "未支付"
        }else if(data === "SUCCESS"){
            return "支付成功"
        }else if(data === "FAILURE"){
            return "支付失败"
        }else if(data === "REFUND"){
            return "已退款"
        }else if(data === "CANCEL"){
            return "已撤销"
        }else{
            return "-"
        }
    }
    //详情按钮
//    function detailFormatter(index, row, $detail) {
//        return '<button type="button" id="btn_detail" class="btn btn-mini btn-success">详情</button>';
//    }
    //金额格式化
    function formatter(s,n) {
        s = parseFloat((s + "").replace(/[^\d\.-]/g,"")).toFixed(n)+"";
        if(isNaN(s) || ((s + "").replace(/\s/g,""))==""){
            return "";
        }
        n = n > 0 && n <= 20 ? n:2;
        var l = s.split(".")[0].split("").reverse(),r = s.split(".")[1];
        t = "";
        for(i=0;i<l.length;i++){
            t+=l[i] + ((i+1)%3==0 && (i+1)!=l.length?",":"");
        }
        return t.split("").reverse().join("")+"."+r;
    }
    //前端时间转换
    function timeFormat(data) {
        return format(data,"yyyy-MM-dd HH:mm:ss");
    };

    function format(time, format){
        var t = new Date(time);
        var tf = function(i){return (i < 10 ? "0" : "") + i};
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
            switch(a){
                case "yyyy":
                    return tf(t.getFullYear());
                    break;
                case "MM":
                    return tf(t.getMonth() + 1);
                    break;
                case "mm":
                    return tf(t.getMinutes());
                    break;
                case "dd":
                    return tf(t.getDate());
                    break;
                case "HH":
                    return tf(t.getHours());
                    break;
                case "ss":
                    return tf(t.getSeconds());
                    break;
            }
        })
    }
</script>
</body>
</html>